<template>
	<view class="wrap">
		<!-- 上传图片-->
		<view class="info-wrap">
			<image :src="img" @click="onupdateimg" class="photo"></image>
			<text>！仅支持传1张图片</text>
		</view>
		<view class="cont">
			<van-field v-model="name" type="tel" label="宠物名字" placeholder="请输入宠物名字" />
			<van-field v-model="age" is-link readonly name="picker" label="宠物年龄" placeholder="点击选择年龄"
				@click="showPicker = true" />
			<van-popup v-model:show="showPicker" position="bottom">
				<van-picker :columns="ages" @confirm="onConfirm1" @cancel="showPicker = false" />
			</van-popup>
			<van-field name="radio" label="性别">
				<template #input>
					<van-radio-group v-model="checked1" direction="horizontal">
						<van-radio name="1" checked-color="#fbc117">男孩</van-radio>
						<van-radio name="0" checked-color="#fbc117">女孩</van-radio>
					</van-radio-group>
				</template>
			</van-field>
			<van-field name="radio" label="种类">
				<template #input>
					<van-radio-group v-model="checked2" direction="horizontal">
						<van-radio name="1" checked-color="#fbc117">猫咪</van-radio>
						<van-radio name="2" checked-color="#fbc117">狗狗</van-radio>
						<van-radio name="3" checked-color="#fbc117">其它</van-radio>
					</van-radio-group>
				</template>
			</van-field>
			<!-- <van-field v-model="breed" type="tel" label="宠物品种" placeholder="请输入宠物品种" /> -->
			<van-field v-model="breed" is-link readonly name="picker" label="宠物品种" placeholder="点击选择品种"
				@click="showPicker2 = true" />
			<van-popup v-model:show="showPicker2" position="bottom">
				<van-picker :columns="petbreeds" @confirm="onConfirm2" @cancel="showPicker2 = false" />
			</van-popup>
			<van-field name="radio" label="是否已注射疫苗">
				<template #input>
					<van-radio-group v-model="checked3" direction="horizontal">
						<van-radio name="1" checked-color="#fbc117">是</van-radio>
						<van-radio name="0" checked-color="#fbc117">否</van-radio>
					</van-radio-group>
				</template>
			</van-field>
			<van-field name="radio" label="是否已绝育">
				<template #input>
					<van-radio-group v-model="checked4" direction="horizontal">
						<van-radio name="1" checked-color="#fbc117">是</van-radio>
						<van-radio name="0" checked-color="#fbc117">否</van-radio>
					</van-radio-group>
				</template>
			</van-field>
			<van-field name="radio" label="是否已驱虫">
				<template #input>
					<van-radio-group v-model="checked5" direction="horizontal">
						<van-radio name="1" checked-color="#fbc117">是</van-radio>
						<van-radio name="0" checked-color="#fbc117">否</van-radio>
					</van-radio-group>
				</template>
			</van-field>
			<van-cell-group inset class="ps">
				<text style="font-size: 28rpx;line-height: 80rpx;margin-left: 30rpx;">TA的故事</text>
				<van-field v-model="message" rows="2" autosize type="textarea" maxlength="50"
					placeholder="请输入宠物相关描述/送养原因" show-word-limit style="background-color:#f7f7f7;" />
			</van-cell-group>
			<van-field v-model="result" is-link readonly name="area" label="地区选择" placeholder="点击选择省市区"
				@click="showArea = true" />
			<van-popup v-model:show="showArea" position="bottom">
				<van-area :area-list="areaList" @confirm="onConfirm" @cancel="showArea = false" />
			</van-popup>
			<van-field v-model="info" type="tel" label="详细地址" placeholder="请输入您的详细地址" />
			<van-field v-model="peoplename" type="tel" label="联系人姓名" placeholder="输入您的姓名" />
			<van-field v-model="tel" type="tel" label="手机号" placeholder="输入手机号" />
			<text class="ts">*该送养信息将通过宠物帮多种自有渠道帮您宣传</text>
		</view>
		<view class="btn" @click="update">
			<view class="right">
				<text>发布</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		computed
	} from 'vue'
	import $http from '../../request/index.js'
	import {
		showSuccessToast,
		showFailToast
	} from 'vant'
	import {
		useStore
	} from 'vuex'
	const store = useStore()
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'

	let checked1 = ref('1')
	let checked2 = ref('1') //type
	let checked3 = ref('1')
	let checked4 = ref('1')
	let checked5 = ref('1')

	let name = ref('') //宠物名字
	let peoplename = ref('') //联系人名字
	let info = ref('') //详细地址信息
	let tel = ref('') //联系人电话
	let message = ref('') //宠物相关描述、送养原因


	let img = ref('../../static/photo.png')
	let showPicker = ref(false);
	let age = ref('');
	let ageval = ref('') //宠物年龄
	let ages = [{
			text: '一个月',
			value: '1'
		},
		{
			text: '两个月',
			value: '2'
		},
		{
			text: '五个月',
			value: '3'
		},
		{
			text: '七个月',
			value: '4'
		},
		{
			text: '九个月',
			value: '5'
		},
		{
			text: '五岁以下',
			value: '6'
		},
		{
			text: '五岁以上',
			value: '7'
		},
		{
			text: '年龄未知',
			value: '8'
		}
	];
	let onConfirm1 = ({ //宠物年龄
		selectedOptions
	}) => {
		age.value = selectedOptions[0]?.text;
		ageval.value = selectedOptions[0]?.value;
		showPicker.value = false;
	};
	//宠物品种
	let breed = ref('')
	let breedval = ref('')
	let petbreeds = ref([])
	let showPicker2 = ref(false);
	watch(checked2, newval => { //监听宠物种类，更新宠物品种
		$http.get(`/petbreed/${newval}`).then(res => {
			console.log(res.data)
			let arr = []
			res.data.map((i, k) => {
				arr.push({
					'text': i.petbreedName,
					'value': i.petbreedId
				})
			})
			petbreeds.value = arr
			console.log(petbreeds.value)
		})
	})
	let onConfirm2 = ({ //宠物品种
		selectedOptions
	}) => {
		breed.value = selectedOptions[0]?.text;
		breedval.value = selectedOptions[0]?.value;
		showPicker2.value = false;
	};

	// 省市区
	import {
		areaList
	} from '@vant/area-data';
	const result = ref('');
	const showArea = ref(false);
	const onConfirm = ({
		selectedOptions
	}) => {
		showArea.value = false;
		result.value = selectedOptions.map((item) => item.text).join('/')
	};

	function onupdateimg() { //点击上传图片
		console.log('上传图片')
		uni.chooseImage({
			count: 1,
			success: res => {
				let file1 = res.tempFiles[0]
				uni.uploadFile({
					url: '/api/petimg',
					name: 'file',
					file: file1,
					header: {
						'token': uni.getStorageSync('token')
					},
					success: res => {
						res = JSON.parse(res.data)
						console.log(res)
						img.value = res.data
					}
				})
			}
		})
	}

	function update() { //点击发布，发送请求上传信息，上传成功后弹框提示成功即可
		console.log('发布')
		let data = {
			'petName': name.value, //宠物名字：eg:可可
			'petAge': ageval.value, //宠物年龄（和表里一样，我这里传数字，eg:2）
			'petSex': checked1.value, //宠物性别：（男1、女0）
			'petType': checked2.value, //宠物类型：（狗1、猫2、其它3）
			'petBreed': breedval.value, //宠物品种，string，eg:哈士奇
			'petVaccine': checked3.value, //是否免疫，是1，否0
			'petSterilization': checked4.value, //是否绝育
			'petInisect': checked5.value, //是否驱虫
			'petImg': img.value, //宠物图片
			'petDescr': message.value, //宠物详情
			'deliverAddress': result.value.replace(/\//g, ''), //送养人省市区，字符串
			'deliverCity': info.value, //送养人详细地址
			'deliverPhone': tel.value, //送养人电话
			'deliverName': peoplename.value //送养人名字
		}
		console.log(data)
		$http.post('/examinedeliver/sendinfo', data).then(res => {
			console.log(res)
			let {
				code,
				msg
			} = res
			if (!code) {
				showSuccessToast(msg)
				name.value = '' //宠物名字：eg:可可
				age.value = '' //宠物年龄（和表里一样，我这里传数字，eg:2）
				checked1.value = '1' //宠物性别：（男1、女0）
				checked2.value = '1' //宠物类型：（狗1、猫2、其它3）
				breedval.value = '' //宠物品种，string，eg:哈士奇
				checked3.value = '1' //是否免疫，是1，否0
				checked4.value = '1' //是否绝育
				checked5.value = '1' //是否驱虫
				img.value = '../../static/photo.png' //宠物图片
				message.value = '' //宠物详情
				result.value = '' //送养人省市区，字符串
				info.value = '' //送养人详细地址
				tel.value = '' //送养人电话
				peoplename.value = '' //送养人名字
			} else {
				showFailToast(msg)
			}
		})
	}
	onShow(() => {
		$http.get(`/petbreed/1`).then(res => {
			console.log(res)
			let arr = []
			res.data.map((i, k) => {
				arr.push({
					'text': i.petbreedName,
					'value': i.petbreedId
				})
			})
			petbreeds.value = arr
			console.log(petbreeds.value)
		})
	})
	onLoad(() => {
		let login = computed(() => store.state.login)
		if (!login.value) { //如果登录状态为未登录，跳转到登录页面
			uni.showModal({
				content: '尚未登录，是否立即登录？',
				confirmText: '立即登录',
				success: res => {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}
				}
			})
		}
	})
</script>

<style scoped>
	.left1 {
		width: 200rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.left1 img {
		width: 50rpx;
		height: 50rpx;
	}

	.card {
		width: 100%;
		height: 100rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
	}

	.ts {
		font-size: 24rpx;
		color: #Fe9b23;
		margin-left: 30rpx;
	}

	.info-wrap {
		width: 100vw;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		padding: 40rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		font-size: 24rpx;
		color: #Fe9b23;
	}

	.photo {
		width: 200rpx;
		height: 200rpx;
		margin-right: 200rpx;
		margin-bottom: 20rpx;
	}

	.ps {
		/* width: 100vw; */
		margin: 0;
	}

	.wrap {
		width: 100vw;
		height: calc(100vh - 50px);
		overflow-y: scroll;
		padding-bottom: 50px;
		background-color: #f7f7f7;
		position: relative;
	}

	.btn {
		/* position: absolute;
		left: 0;
		bottom: 0;
		z-index: 99; */
		width: 100vw;
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 40rpx;
		box-sizing: border-box;
		background-color: #ffffff;
	}

	.btn .right {
		width: 600rpx;
		height: 70rpx;
		border: 1px solid #Fe9b23;
		color: #Fe9b23;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>